<template>
  <div class="otherHome">
    <Other-Header index="3" bgColor="#5741d9"></Other-Header>
    <div v-if="list">
      <div class="head"></div>
      <div class="informationBox">
        <div class="medium">
          <!-- 选项卡 -->
          <!--<div class="head">
            <div class="head-content">
              <p :class="{'active':tab==0}" @click="changeTab(0)">{{$t('l.other_a_77')}}</p>
              <p :class="{'active':tab==1}" @click="changeTab(1)">{{$t('l.other_a_78')}}</p>
              <p :class="{'active':tab==2}" @click="changeTab(2)">{{$t('l.other_a_79')}}</p>
            </div>
          </div>-->
          <!-- 内容 -->
          <div class="rule">
            <!-- 活动-->
            <div class="vote-list" v-for="(item, index) in items" :key="index">
              <div class="left-wrap fl">
                <div class="status"
                     :style="{backgroundColor : item.status==0?'#ff5722':item.status==1?'#3385ff':'#8F98B3'}">
                  <p>
                    {{item.status==0?$t('l.other_a_77'):item.status==1?$t('l.other_a_78'):item.status==2?$t('l.ieo_3'):$t('l.other_a_79')}}</p>
                </div>
                <img v-bind:src="item.logo"/>
                <div>
                  <span class="coin-name">{{item.baseCurrencyCode}}</span>
                </div>
                <!---->
                <!---->
              </div>
              <div class="vote-list-detail fl">
                <div class="coin-des font-dynamic">{{item.projectName}}</div>
                <div class="coin-mes">
                  <div class="mes-l">
                    <div class="item-t">
                      <span>{{$t('l.ieo_8')}}</span>
                      <i class="coin-mes-date font-dynamic">{{item.startDate}}</i>
                    </div>
                    <div class="item-b">
                      <span>{{$t('l.ieo_9')}}</span>
                      <i class="coin-mes-date font-dynamic">{{item.endDate}}</i>
                    </div>
                  </div>
                  <div class="mes-r">
                    <div class="item-t">
                      <span>{{$t('l.ieo_5')}}</span>
                      <i class="font-dynamic">{{item.ieoNum}} {{item.baseCurrencyCode}}</i>
                    </div>
                    <div class="item-b">
                      <span>{{$t('l.ieo_6')}}</span>
                      <i class="font-dynamic">{{item.totalAmount}} {{item.quoteCurrencyCode}}</i>
                    </div>
                  </div>
                  <!---->
                </div>
                <div class="process-wrap">
                  <div class="range-wrap">
                    <div class="process-outer">
                      <div class="process-bar"
                           :style="{width:((item.process < 100 ? 100: item.process) /100) +'%'}"></div>
                    </div>
                    <span>{{item.process}}%</span>
                  </div>
                  <span class="btnDetail" @click="detailsMessage(item.ieoId)">{{$t('l.other_a_24')}}</span>
                </div>
                <div class="dashed"></div>
                <div class="timer">
                  <span class="timer-l">{{item.status==0?$t('l.ieo_10'):item.status==1?$t('l.ieo_11'):item.status==2?$t('l.ieo_3'):$t('l.other_a_79')}}</span>
                  <div class="timer-r">
                    <span class="reward-btn">{{item.dd}}</span>
                    <span class="tf">{{$t('l.other_a_91')}}</span>
                    <span class="reward-btn">{{item.hh}}</span>
                    <span class="tf">{{$t('l.other_a_92')}}</span>
                    <span class="reward-btn">{{item.mm}}</span>
                    <span class="tf">{{$t('l.other_a_93')}}</span>
                    <span class="reward-btn">{{item.ss}}</span>
                    <span class="tf">{{$t('l.other_a_94')}}</span>
                  </div>
                  <!---->
                </div>
              </div>
            </div>

            <!-- 测试结束 -->
          </div>
        </div>
      </div>
    </div>
    <div class="vds-ieo" v-else>
      <div class="banner">
        <div class="banner-content">
          <div class="banner-head" style="background: url(/static/ieo/ieoinfo_banner.jpg);">
            <div class="banner-coin">
              {{info.baseCurrencyCode}}
            </div>
            <div class="banner-text">
              {{info.projectName}}
            </div>
            <div class="status"
                 :style="{backgroundColor : info.status==0?'#ff5722':info.status==1?'#3385ff':'#8F98B3'}"><p>
              {{$t('l.ieo_7')}}<br>

              {{info.status==0?$t('l.other_a_77'):info.status==1?$t('l.other_a_78'):info.status==2?$t('l.ieo_3'):$t('l.other_a_79')}}
            </p></div>
          </div>
          <div class="content-x">
            <div class="curse">
              <div class="curse-time"><p class="title">
                {{info.status==0?$t('l.ieo_10'):info.status==1?$t('l.ieo_11'):info.status==2?$t('l.ieo_3'):$t('l.other_a_79')}}</p>
                <div class="count-down">
                  <div><p class="time-num">{{info.dd}}</p>
                    <p class="text">{{$t('l.other_a_91')}}</p></div>
                  <div><p class="time-num">{{info.hh}}</p>
                    <p class="text">{{$t('l.other_a_92')}}</p></div>
                  <div><p class="time-num">{{info.mm}}</p>
                    <p class="text">{{$t('l.other_a_93')}}</p></div>
                  <div><p class="time-num">{{info.ss}}</p>
                    <p class="text">{{$t('l.other_a_94')}}</p></div>
                </div>
              </div>
              <div class="progress">
                <div class="progress-text">
                  <div class="progress-l">
                    <p class="item-time">{{info.startDate}}</p>
                    <p class="item-text brightText">{{$t('l.ieo_8')}}</p>
                  </div>
                  <div class="progress-r">
                    <p class="item-time">{{info.startDate}}</p>
                    <p class="item-text brightText">{{$t('l.ieo_9')}}</p>
                  </div>

                </div>
                <div class="progress-item">
                  <p class="item-icon bright progress-l">
                    <img src="/static/ieo/t1-plus.png"
                         alt=""></p>
                  <p class="item-icon bright progress-r">
                    <img src="/static/ieo/t2-plus.png"
                         alt=""></p>
                </div>
                <div class="progress-bar">
                  <div class="bar-wrap" :style="{width:((info.process < 100 ? 100: info.process) /100) +'%'}"></div>
                </div>
                <div class="progress-point">
                  <div class="bar-wrap">
                    ...................
                  </div>
                </div>
              </div>
              <div class="order-num"><p><span class="num">{{info.peopleNum}}</span>
                {{$t('l.ieo_14')}}
              </p></div>
            </div>
            <div class="info">
              <div class="info-content2">
                <!--申购总量-->
                <div class="surplus">
                  <div class="surplus-num info-item"><p class="item-left">{{$t('l.ieo_12')}}：</p>
                    <p class="item-right num">
                      {{info.ieoNum}}
                      &nbsp;{{info.baseCurrencyCode}}
                    </p></div>
                </div>
                <!--申购价格-->
                <div class="price info-item"><p class="item-left">{{$t('l.ieo_13')}}：</p>
                  <p class="item-right price-num">
                    1
                    {{info.baseCurrencyCode}}
                    =
                    {{info.ieoPrice}}
                    {{info.quoteCurrencyCode}} <br> <span class="about">
                {{$t('l.ieo_18')}} {{info.ieoPrice}}{{info.quoteCurrencyCode}}
                </span></p></div>
                <div class="buy-now info-item"><p class="item-left">{{$t('l.ieo_15')}}</p>
                  <p class="item-right price-num"><span class="ex">{{$t('l.ieo_17')}}</span>
                    {{info.surplusAmount}}
                    {{info.quoteCurrencyCode}}
                  </p></div>
                <div class="input-wrap">
                  <div class="input-box" style="background: rgb(255, 255, 255);">
                    <input type="text" :placeholder="$t('l.ieo_16') +' ' +0" autofocus="autofocus" @keyup="result"
                           ref="input_exchange">
                    <span>{{info.baseCurrencyCode}}</span></div>
                  <img src="/static/ieo/transform.png"
                       alt="">
                  <div class="input-box disabled" style="border: none;"><input type="text" :value="ieo_Num"
                                                                               disabled="disabled"> <span>{{info.quoteCurrencyCode}}</span>
                  </div>
                </div>
                <div v-if="noLogin">

                </div>
                <div class="protocol info-item" v-if="!noLogin">
                  <div class="agree item-left">
                    <input type="checkbox" checked> <span>{{$t('l.ieo_22')}}</span> <span class="prot" @click="changeSel(2)">《{{$t('l.ieo_21')}}》</span>
                  </div>
                  <div class="item-right"> {{availableAmount}}{{info.quoteCurrencyCode}}&nbsp;{{$t('l.ieo_23')}}</div>
                </div>
                <!----> <!----> <!---->
                <div class="loginBox" v-if="noLogin">
                  <router-link class="login" to="/login">{{$t('l.header_13')}}</router-link>
                </div>
                <div class="confirm-buy-y" v-else-if="info.status==0">{{$t('l.ieo_1')}}</div>
                <div class="confirm-buy-x" v-else-if="info.status==1" @click="onPayConfirm">{{$t('l.ieo_2')}}</div>
                <div class="confirm-buy" v-else-if="info.status==2">{{$t('l.ieo_3')}}</div>
                <div class="confirm-buy" v-else-if="info.status==3">{{$t('l.ieo_3')}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!---->
      <div class="medium">
        <div class="head">
          <div class="head-content">
            <p :class="{'active':sel==1}" @click="changeSel(1)">{{$t('l.ieo_20')}}</p>
            <p :class="{'active':sel==2}" @click="changeSel(2)">{{$t('l.ieo_21')}}</p>
            <p :class="{'active':sel==0}" @click="changeSel(0)">{{$t('l.ieo_19')}}</p>
          </div>
        </div>
        <!--配送说明-->
        <div class="rule" v-show="sel==1">
          <div class="no-data" v-if="!info.giveIntro">
            <img src="../../assets/images/7c57ae4.svg"><br>
            {{$t('l.personal_140')}}
          </div>
          <p><strong>{{info.giveIntro}}</strong></p>
        </div>
        <!--风险说明-->
        <div class="rule" v-show="sel==2">
          <div class="no-data" v-if="!info.riskIntro">
            <img src="../../assets/images/7c57ae4.svg"><br>
            {{$t('l.personal_140')}}
          </div>
          <p><strong>{{info.riskIntro}}</strong></p>
        </div>
        <!--项目简介-->
        <div class="rule" v-show="sel==3">
          <div class="no-data" v-if="!info.ieoIntro">
            <img src="../../assets/images/7c57ae4.svg"><br>
            {{$t('l.personal_140')}}
          </div>
          <p><strong>{{info.ieoIntro}}</strong></p>
        </div>
        <!--邀请列表-->
          
        <!---->
        <div class="container-data rule" v-show="sel==0" style="padding: 0px 0.3rem;">
          <div class="table invite-record">
            <div class="table-item table-head"><p style="text-align: left;">{{$t('l.personal_174')}}</p>
              <p style="text-align: center;">{{$t('l.personal_173')}}</p>
              <p style="text-align: center;">{{$t('l.personal_275')}}</p>
              <p style="text-align: right;">{{$t('l.personal_175')}}</p>
              </div>
            <div class="no-data" v-if="invitelist.length<1">
              <img src="../../assets/images/7c57ae4.svg"><br>
              {{$t('l.personal_140')}}
            </div>
            <div class="list-body" v-else>
              <div class="list-item transition" v-for="(item,index) in invitelist" :key="index">
                <div class="list-item-v">
                  {{item.userCode}}
                </div>
                <div class="list-item-v" style="text-align: center;">
                  {{item.createdDate}}
                </div>
                <!--<div class="list-item-v" style="text-align: center;">
                  <span v-if="item.userType==0 || item.userType==1">{{$t('l.personal_177')}}</span>
                  <span v-else-if="item.userType==2">{{$t('l.personal_178')}}</span>
                  <span v-else-if="item.userType==3">{{$t('l.personal_179')}}</span>
                  <span v-else-if="item.userType==4">{{$t('l.personal_180')}}</span>
                </div>-->
                <div class="list-item-v" style="text-align: center;">
                  <span v-if="item.ieoExchangeAmountStr==null || item.ieoExchangeAmountStr==''">0</span>
                  <span v-else>{{item.ieoExchangeAmountStr}}</span>
                </div>
                
                <div class="list-item-v" style="text-align: right;">
                  {{item.country?item.country:$t('l.personal_4')}}
                </div>
              </div>


            </div>
          </div>
        </div>
        <!---->


      </div>

    </div>
    <Footer></Footer>
  </div>
</template>

<script>
  import {api} from "@/api/api";
  import OtherHeader from "@/components/otherHeader";
  import Footer from "@/components/footer";

  export default {
    components: {
      OtherHeader,
      Footer
    },
    data() {
      return {
        noLogin: this.$store.state.usertoken ? false : true,
        tab: 0,
        sel: 1,
        list: true,
        invitelist: [],
        items: [],
        isInitShowTime: true,
        availableAmount:0,
        info: {
          exchangeAmount: ""
        },
        ieo_Num: "",
        input_exchange: null,
      };
    },
    async created() {
      this.getIeoList(0);
    },
    methods: {
      /* 发送请求 */


      //获取一次性token
      async getOnceToken() {
        let res = await api.getOnceToken();
        if (res.data.code == 0) {
          return res.data.data.resultToken;
        }
      },
      /*获取列表*/
      async getIeoList(status) {
        let params = {
          pageNum: 1,
          pageSize: 50,
          // status: status,
          lang: this.$i18n.locale
        };
        let res = await api.ieoList(params);
        let {code, data, msg} = res.data;
        let _this = this;
        if (code == 0) {
          let {records: ieoList} = data;
          let newData = [];
          ieoList.map((item, index) => {
            newData.push(item);
            _this.$set(item, "ss", _this.getTimeList());
            item.process = Number((item.totalAmount - item.surplusAmount) / item.totalAmount * 100).toFixed(2);
            // _this.$set(
            //   item,
            //   "status",
            //   checkDateStatus(item.startDate, item.endDate)
            // );
          });
          this.items = newData;

          // this.items = activityList.map(item => ({
          //   id: item.id,
          //   date: item.createTime,
          //   status: checkDateStatus(item.startDate, item.endDate),
          //   startDate: item.startDate, //开始时间
          //   endDate: item.endDate, //结束时间
          //   src: item.pictureUrl,
          //   title: item.title,
          //   details: item.introduction
          // }));
        } else {
          this.$layer.msg(msg);
        }
      },
      //获取详情
      async getIeoDetail(ieoId) {
        let res = await api.ieoInfo(ieoId);
        let {code, data, msg} = res.data;
        if (code == 0) {
          Object.assign(this.info, data);
          await this.getAvailableQuantity(this.info.quoteCurrencyCode)
        } else {
          this.$layer.msg(msg);
        }
      },
      result() {
        this.ieo_Num = this.$refs.input_exchange.value / this.info.ieoPrice;
      },
      //申购
      async postBuy() {

        let params = {
          exchangeAmount: this.$refs.input_exchange.value,
          projectId: this.info.ieoId,
          onceToken: await this.getOnceToken()
        };
        let res = await api.ieoBuy(params);
        let {code, data, msg} = res.data;

        if (code == 0) {
          this.$layer.msg(msg);
        } else {
          this.$layer.msg(msg);
        }
      },
      detailsMessage(id) {
        this.list = false;
        this.getIeoDetail(id);
        this.info = this.items.find(item => item.ieoId == id);
      },
      // 币种可用余额
      async getAvailableQuantity(currencyCode) {
        //console.log("余额请求")
        let res = await api.findByCurrencyCode({
          currencyCode: currencyCode
        });
        let { code, data, msg } = res.data;
        if (code == 0) {
          this.availableAmount = Number(data.availableAmount);
        }
      },
      // 确认申购
      onPayConfirm() {
        let title = this.$t("l.ieo_24");
        let btnText = this.$t("l.order_about28");
        let content = "";

        this.$alert(content, title, {
          confirmButtonText: btnText,
          customClass: "order-message content-center",
          callback: action => {
            if (action === "confirm") {
              this.postBuy();
            }
          }
        });
      },
      /* 倒计时 */
      getTimeList() {
        var _this = this;
        setInterval(function () {
          for (var key in _this.items) {
            let now = Date.now(),
              startTime = +new Date(_this.items[key]["startDate"]),
              endTime = +new Date(_this.items[key]["endDate"]);
            if (now < startTime) {
              let rightTime = startTime - now;
              var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
              var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
              var mm = Math.floor((rightTime / 1000 / 60) % 60);
              var ss = Math.floor((rightTime / 1000) % 60);
              // dd = dd > 9 ? dd : "0" + dd;
              hh = hh > 9 ? hh : "0" + hh;
              mm = mm > 9 ? mm : "0" + mm;
              ss = ss > 9 ? ss : "0" + ss;
              _this.items[key]["dd"] = dd;
              _this.items[key]["hh"] = hh;
              _this.items[key]["mm"] = mm;
              _this.items[key]["ss"] = ss;
            } else if (now < endTime && now > startTime) {
              let rightTime = endTime - now;
              var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
              var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
              var mm = Math.floor((rightTime / 1000 / 60) % 60);
              var ss = Math.floor((rightTime / 1000) % 60);
              hh = hh > 9 ? hh : "0" + hh;
              mm = mm > 9 ? mm : "0" + mm;
              ss = ss > 9 ? ss : "0" + ss;
              _this.items[key]["dd"] = dd;
              _this.items[key]["hh"] = hh;
              _this.items[key]["mm"] = mm;
              _this.items[key]["ss"] = ss;
              _this.items[key]["status"] = 1;
            } else {
              _this.items[key]["dd"] = "0";
              _this.items[key]["hh"] = "00";
              _this.items[key]["mm"] = "00";
              _this.items[key]["ss"] = "00";
              _this.items[key]["status"] = 2;
            }
          }
        }, 1000);
      },
      async getinvitelist() {
        let that = this;
        let params = {
          pageNum: 1,
          pageSize: 10000
        };
        let res = await api.inviteList(params);
        if (res.data.code == 0) {
          that.invitecode = res.data.data.inviteCode;
          that.inviteUrl = res.data.data.inviteUrl;
          that.invitelist = res.data.data.inviteUserList.records;
          console.log('邀请列表', that.invitelist);
        } else {
          this.$layer.msg(res.data.msg);
        }
      },
      /* 选项卡 */
      async changeTab(index) {
        await this.getIeoList(index);
        this.tab = index;
      },
      /* 选项卡 */
      async changeSel(index) {
        this.sel = index;
        if (index == 0) {
          this.getinvitelist();

        }
      }
    },
  };
</script>


<style lang="less" scoped>

  .banner-coin{
    background-image: -webkit-linear-gradient(top, #000000,#dadada, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: .8rem;
    text-align: center;
    padding-top: 0.3rem;
    font-weight: bold;
  }
  .banner-text{
    font-size: 0.2rem;
    text-align: center;
    padding-top: 0.1rem;
    color: white;
    font-weight: lighter;
  }


  .otherHome {
    background-color: #fff;
    position: absolute;
    min-height: 100%;
    width: 100%;
	padding-top: 100px;

    .head {
      height: 2.56rem;
      background: url(/static/ieo/ieo-banner.png) #0b1e27;
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: cover;
    }
  }

  .informationBox {
    width: 1200px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto 0;
    padding-bottom: 160px;

    .medium {
      background: #fff;
      /*border: 1px solid #e1e1e6;*/
      border-radius: 10px;

      .head {
        border: 1px #dfe4ed solid;
        height: 65px;
        line-height: 65px;
        background: rgba(255, 255, 255, .5);

        .head-content {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
          margin: 0 auto;
          width: 436px;
          font-size: 2px;
          font-weight: bold;

          .active {
            border-bottom: 4px solid #111625;
            color: #1b85ff;
          }

          p {
            height: 63px;
            cursor: pointer;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #181818;
          }
        }
      }
    }
  }

  /*  */
  .rule {
    margin-top: 30px;

    .vote-list {
     /* background-color: #151b30; */
      /* box-shadow: 0 1px 6px 0 #0d142f; */
    -webkit-box-shadow: 0 1px 6px 0 #d8dce5;
      /* box-shadow: 0 1px 6px 0 #d8dce5; */
      border-radius: 1px;
      margin: 0 auto 20px;
      overflow: hidden;
      padding: .2rem;
      display: flex;
      flex-direction: row;

      .left-wrap {
        height: 1.8rem;
        vertical-align: top;
        border: solid 1px #1871ce40;
        position: relative;
        -webkit-transition: all 0.1s linear 0s;
        transition: all 0.1s linear 0s;
        top: 0;
        background: #fff;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(26, 42, 51, 0.15);
        box-shadow: 0px 0px 10px 0px rgba(26, 42, 51, 0.15);
        overflow: hidden;
        flex: 0 0 2.82rem;
        .status {
          position: absolute;
          top: -0.6rem;
          left: -0.6rem;
          width: 1.2rem;
          height: 1.2rem;
          color: #fff;
          font-size: 0.2rem;
          -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
          z-index: 99;

          p {
            position: absolute;
            bottom: 5%;
            left: 13%;
            width: 75%;
            line-height: 0.17rem;
            text-align: center;
            font-weight: bold;
            font-size: 0.14rem;
            color: #fff;
          }
        }

        img {
          width: 80px;
          height: 80px;
          position: absolute;
          top: 25px;
          left: 102px;
        }

        div {
          bottom: 20px;
          position: absolute;
          text-align: center;
          width: 100%;

          .coin-name {
            font-size: 18px;
            font-weight: bold;
            height: 29px;
            color: #33385e;
            line-height: 15px;
          }
        }
      }

      .vote-list-detail {
        flex: 1 1 auto;
        padding: 0 0.3rem;

        .coin-des {
          color: #33385e;
          text-align: left;
          line-height: 20px;
          height: 40px;
          overflow: hidden;
          text-overflow: ellipsis;
          /*  */
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          display: -webkit-box;
          -webkit-line-clamp: 2;
        }

        .coin-mes {
          line-height: 24px;
          height: 48px;
          font-size: 14px;
          color: #6677b1;
          display: flex;
          flex-direction: row;
          .mes-l,.mes-r {
            display: flex;
            flex-direction: column;
            flex: auto;
          }
          .item-t,.item-b {
            position: relative;
          }
          span {
            width: 56px;
            white-space: nowrap;
          }

          i {
            color: #2d2f33;
            font-style: normal;
            white-space: nowrap;
            text-overflow: ellipsis;
            position: absolute;
            left: 1rem;
          }

          i.coin-mes-date {
            width: 180px;
          }
        }

        .process-wrap {
          width: 100%;
          height: 38px;
          position: relative;

          .range-wrap {
            width: 412px;
            position: relative;
            float: left;

            .process-outer {
              width: 452px;
              margin-top: 16px;
              background: #33385e;
              height: 8px;
              border-radius: 4px;
              position: absolute;
              left: 0;
              top: 0;
              overflow: hidden;

              .process-bar {
                width: 0;
                height: 8px;
                border-radius: 4px;
                background: #0199f1;
              }
            }

            span {
              left: 462px;
              height: 20px;
              font-size: 20px;
              line-height: 20px;
              top: 9px;
              color: #0199f1;
              position: absolute;
            }
          }

          .btnDetail {
            position: absolute;
            right: 0;
            top: -8px;
            width: 88px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            border-radius: 2px;
            color: #fff;
            font-size: 14px;
            background: -webkit-gradient(linear, left top, right top, from(#3360FF), to(#04A6FE));
            background: linear-gradient(90deg, #3360FF 0%, #04A6FE 100%);
            cursor: pointer;
          }
        }

        .dashed {
          width: 100%;
          height: 1px;
          margin: 0 0 10px;
          background: #272e43;
        }

        .timer {
          display: flex;
          flex-direction: row;
          align-items: center;
          .timer-l {
            flex: 0 0 1.5rem;
          }
          .timer-r {
            flex: 1 1 auto;
          }
          .reward-btn {
            color: #1bb996;
            border: 1px dashed #1bb996;
            float: left;
            width: 80px;
            height: 22px;
            border-radius: 2px;
            line-height: 22px;
            text-align: center;
            font-size: 14px;
          }

          .tf {
            float: left;
            height: 22px;
            text-align: center;
            line-height: 22px;
            margin: 0 10px 0 2px;
          }

          .status-t {
            float: right;

            span {
              display: block;
              height: 30px;
              line-height: 30px;
              border-radius: 15px;
              width: 70px;
              text-align: center;
            }

            .staus-finished {
              background: #9096a8;
            }
          }
        }
      }
    }
  }
</style>

<style lang="less">
  @import '../../assets/css/ieo.css';
</style>
